<template>
	<view class="qiun-columns">
		<view v-if="title !== ''" class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="font-normal text-blue">{{ title }}</view>
		</view>
		<scroll-view scroll-x="true">
			<canvas canvas-id="heartchart"  @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA" id="heartchart" class="charts" :style="{'width':cWidth*pixelRatio+'px'}"></canvas>
		</scroll-view>
		<view class="fix_right"></view>
		<view class="fix_left"></view>
	</view>
</template>

<script>
	import uCharts from '@/common/lib/u-charts.min.js'
	import Vue from 'vue'
	var _self;
	var canvaColumn = null;
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			categories:{
				type:Array,
				default(){
					return [];
				}
			},
			series:{
				type:Array,
				default(){
					return [];
				}
			}
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: ''
			}
		},
		watch:{
			categories(oldvalue,newvalue){
				let Column = {
					categories: [''],
					series: [{
						"name":"心率",
						"data":[]
					}]
				};
				setTimeout(function(){
					Column.categories = _self.categories;
					Column.series = _self.series;
					var width = _self.series[0].data.length*50
					if(width<750){
						_self.cWidth = uni.upx2px(750)
					}else{
						_self.cWidth = uni.upx2px(width);
					}
					_self.showColumn("heartchart", Column);
				},300)
				
			}
		},
		mounted() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(380);
			
		},
		methods: {
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					enableScroll: false,
					enableMarkLine:true,
					legend: {
						position: 'top',
						float: 'left'
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disabled:true,
						disableGrid: true,
						itemCount:20,//x轴单屏显示数据的数量，默认为5个
						scrollShow:true,//新增是否显示滚动条，默认false
						scrollAlign:'left',//滚动条初始位置
						scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF
						scrollColor:'#DEE7F7',//默认为 #A6A6A6
					},
					yAxis: {
						disableGrid:true,
						disabled:true,
						data:[{
							min:0,
							max:200
						}]
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						},
						line:{
							type:'curve'
						},
						markLine:{
							type:'dash',
							data:[{
								value:'60',
								lineColor:'#FF0000'
							},{
								value:'100',
								lineColor:'#FF0000'
							}]
						}
					}
				});
			},
			changeData() {
				canvaColumn.updateData({
					series: _self.serverData.ColumnBlood.series,
					categories: _self.serverData.ColumnBlood.categories
				});
			},
			touchLineA(e){
				canvaColumn.scrollStart(e);
				
			},
			moveLineA(e) {
				canvaColumn.scroll(e);
			},
			touchEndLineA(e) {
				canvaColumn.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
		}
	}
</script>

<style>
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		/* width: 96%; */
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	/* 通用样式 */
	.qiun-charts {
		width: 750upx;
		height: 380upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 380upx;
		background-color: #FFFFFF;
	}
</style>
